<div id="ConsolePanel" class="OneContainer">
  <div class="row">
    <div class="col-md-3">
      <div class="Panel PanelBlack">
        <div class="PanelTitle">服务端信息</div>
        <div class="PanelBody">
          <div class="PanelItem">
            <span class="glyphicon glyphicon-th-large" aria-hidden="true"> </span>
            名称: {{ serverData.name }}
          </div>
          <div class="PanelItem">
            <span class="glyphicon glyphicon-tasks" aria-hidden="true"> </span>
            CPU 使用率: {{ sysCpu }} %
          </div>
          <div class="PanelItem">
            <span class="glyphicon glyphicon-equalizer" aria-hidden="true"> </span>
            内存 使用率: {{ (100 - sysMonery).toFixed(1) }} %
          </div>
          <div class="PanelItem" v-if="run">
            <span class="glyphicon glyphicon-ok" aria-hidden="true"> </span>
            <span style="color: #23970c"> 状态: 正在运行..</span>
          </div>
          <div class="PanelItem" v-else>
            <span class="glyphicon glyphicon-remove" aria-hidden="true"> </span>
            状态: 未运行
          </div>
        </div>
      </div>
      <div class="Panel" :class="run==true?'PanelGreen':'PanelYellow'">
        <div class="PanelTitle">服务端操作</div>
        <div class="PanelBody">
          <div class="PanelItem" v-on:click="toTerminal()">
            <span class="glyphicon glyphicon-unchecked" aria-hidden="true"> </span>
            模拟型终端
          </div>
          <transition name="slide-fade">
            <div class="PanelItem" v-on:click="toOpenServer()" v-show="!run">
              <span class="glyphicon glyphicon-play" aria-hidden="true"> </span>
              开启服务器
            </div>
          </transition>
          <transition name="slide-fade">
            <div class="PanelItem" v-on:click="toCommand('__stop__')" v-show="run">
              <span class="glyphicon glyphicon-pause" aria-hidden="true"> </span>
              关闭服务器
            </div>
          </transition>
          <div class="PanelItem" v-on:click="toCommand('__restart__')" v-show="run">
            <span class="glyphicon glyphicon-refresh" aria-hidden="true"> </span>
            重启服务器
          </div>
          <div class="PanelItem" v-on:click="toCommand('__killserver__')" v-show="run">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"> </span>
            强制性结束进程
          </div>
        </div>
      </div>
      <div class="Panel" :class="serverData.autoRestart?'PanelGreen':'PanelGray'">
        <div class="PanelTitle">崩溃监视与配置</div>
        <div class="PanelBody">
          <div class="PanelItem" v-on:click="toProperties()">
            <span class="glyphicon glyphicon-cog" aria-hidden="true"> </span>
            Server.properties 配置文件
          </div>
          <transition name="slide-fade">
            <div class="PanelItem" v-on:click="toAutoRestart(false)" v-show="serverData.autoRestart">
              <span class="glyphicon glyphicon-retweet" aria-hidden="true"> </span>
              崩溃重启:
              <span style="color: #29b90c">打开</span>
            </div>
          </transition>
          <transition name="slide-fade">
            <div class="PanelItem" v-on:click="toAutoRestart(true)" v-show="!serverData.autoRestart">
              <span class="glyphicon glyphicon-retweet" aria-hidden="true"> </span>
              崩溃重启:
              <span style="color: #818181">关闭</span>
            </div>
          </transition>
        </div>
      </div>
      <div class="Panel PanelGray" v-if="isFtpOpen">
        <div class="PanelTitle">FTP 链接信息</div>
        <div class="PanelBody">
          <div class="PanelItem">
            <span class="glyphicon glyphicon-user" aria-hidden="true"> </span>
            账号: {{ MCSERVER.username + "." + serverData.name }}
          </div>

          <div class="PanelItem">
            <span class="glyphicon glyphicon-th-list" aria-hidden="true"> </span>
            端口: {{ FTP_port }}
          </div>
          <div class="PanelItem">
            <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
            密码:
            <span style="color: #666666">&lt;与登陆密码相同&gt;</span>
          </div>
          <div class="PanelItem">
            <span class="glyphicon glyphicon-send" aria-hidden="true"></span>
            模式:
            <span style="color: #666666">&lt;被动传输模式&gt;</span>
          </div>
        </div>
      </div>
      <div class="Panel PanelGray">
        <div class="PanelTitle">普通外置接口</div>
        <div class="PanelBody">
          <div class="PanelItem">
            <span class="glyphicon glyphicon-barcode" aria-hidden="true"> </span>
            <span v-on:click="toAPI_JSON()">格式 JSON | API 接口</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-9">
      <div class="Panel PanelBlack">
        <div class="PanelTitle">服务端控制组</div>
        <div class="PanelBody">
          <div class="row">
            <div class="col-md-3 col-sm-6" v-on:click="RES.redirectPage('./template/component/terminal.html', null, '')">
              <div class="PanelItemBlock">
                <div class="LogV">
                  <span class="glyphicon glyphicon-console" aria-hidden="true"> </span>
                </div>
                <div class="LogK">命令控制台</div>
              </div>
            </div>
            <div class="col-md-3 col-sm-6" v-on:click="toOnlineFs()">
              <div class="PanelItemBlock">
                <div class="LogV">
                  <span class="glyphicon glyphicon-th-list" aria-hidden="true"> </span>
                </div>
                <div class="LogK">文件在线管理</div>
              </div>
            </div>
            <div class="col-md-3 col-sm-6" v-on:click="toSchedule()">
              <div class="PanelItemBlock">
                <div class="LogV">
                  <span class="glyphicon glyphicon-indent-right" aria-hidden="true"> </span>
                </div>
                <div class="LogK">计划任务项目</div>
              </div>
            </div>
            <div class="col-md-3 col-sm-6" v-on:click="toPingMCProtocol()">
              <div class="PanelItemBlock">
                <div class="LogV" style="font-size: 18px">
                  <!-- <span class="glyphicon glyphicon-cog" aria-hidden="true"> </span> -->
                  <strong>
                    <span>
                      <span style="color: rgb(38, 165, 26)" v-text="mcping.current_players"></span>
                      <span style="color: rgb(0, 0, 0)">/</span>
                      <span style="color: rgb(38, 165, 26)" v-text="mcping.max_players"></span>
                    </span>
                  </strong>
                </div>
                <div class="LogK">
                  <span>状态监控协议</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-9" id="ChartCPUFor">
      <div class="Panel">
        <div class="PanelTitle">中央处理器 使用率 （%）</div>
        <div class="PanelBody">
          <div class="row">
            <div id="ChartCPU" style="height: 280px; width: 100%"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3"></div>
    <div class="col-md-9">
      <div class="Panel">
        <div class="PanelTitle">物理内存 使用率 （%）</div>
        <div class="PanelBody">
          <div class="row">
            <div id="ChartRAM" style="height: 280px; width: 100%"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  MI.rListener("onload", function () {
    // 定义页面地址
    TOOLS.definePage("template/component/console", "server/console", MCSERVER.listenServername);

    var serverName = MCSERVER.listenServername;

    VIEW_MODEL.newVue("ConsolePanel", {
      el: "#ConsolePanel",
      methods: {
        toAutoRestart: function () {
          WS.sendMsg("server/console/autorestart", serverName);
        },
        toOnlineFs: function () {
          var path = MCSERVER.URL("fs_auth/auth/" + encodeURIComponent(serverName));
          window.open(path);
        },
        toOpenServer: function () {
          this.allowedStart = !this.allowedStart;
          WS.sendMsg("server/console/open", serverName);
        },
        toCommand: function (parCommand) {
          if (parCommand && typeof parCommand == "string") this.command = parCommand;
          var data = {
            command: this.command,
            serverName: serverName
          };
          if (this.command.length >= 1 || typeof parCommand == "string") {
            WS.sendMsg("server/console/command", JSON.stringify(data));
          }
          this.command = "";
        },
        toProperties: function () {
          RES.redirectPage("./template/component/properties.html", "server/properties", serverName);
        },
        toTerminal: function () {
          RES.redirectPage("./template/component/terminal.html", "server/console", serverName);
        },
        toSchedule: function () {
          RES.redirectPage("./template/component/schedule.html", "schedule/list", serverName);
        },
        toAPI_JSON: function () {
          window.open("/api/status/" + serverName);
        },
        toAPI_PAGE: function () {
          window.open("/api/status/" + serverName);
        },
        toPingMCProtocol: function () {
          PAGE.listenServername = MCSERVER.listenServername;
          TOOLS.popWind({
            style: {
              maxWidth: "500px",
              top: "15%"
            },
            title: "监控协议配置",
            template: "template/dialog/pingmc_config.html"
          });
        },
        toTerminal: function () {
          // 打开弹窗型终端
          TOOLS.listenTerminal(serverName);
        }
      },
      data: {
        command: "",
        allowedStart: true,
        runStatusClass: "",
        username: MCSERVER.listenServername
      },
      watch: {
        run: function (cur, old) {}
      }
    });

    // 服务器状态请求
    PAGE.timerR = setInterval(function () {
      WS.sendMsg("server/console", MCSERVER.listenServername);
    }, 3000);

    //CPU
    var CPUoption = TOOLS.charts.DefOption;
    var RAMoption = TOOLS.charts.DefOption;

    //表格
    var ChartCPU = null;
    var ChartRAM = null;
    PAGE.ChartLogIs = true;
    TOOLS.charts.bulider(
      "ChartCPU",
      24,
      {},
      function (chart) {
        ChartCPU = chart;

        function doing() {
          chart.replaceData(VIEW_MODEL["ConsolePanel"].CPUlog);
          //chart.pushData(getNowFormatDate(), GetRandomNum(1, 40));
          chart.reOption();
          if (PAGE.ChartLogIs) setTimeout(doing, 4000);
        }
        doing();
      },
      CPUoption
    );
    //ChartRAM
    TOOLS.charts.bulider(
      "ChartRAM",
      24,
      {},
      function (chart) {
        ChartRAM = chart;

        function doing() {
          chart.replaceData(VIEW_MODEL["ConsolePanel"].RAMlog);
          //chart.pushData(getNowFormatDate(), GetRandomNum(1, 40));
          chart.reOption();
          if (PAGE.ChartLogIs) setTimeout(doing, 4000);
        }
        doing();
      },
      CPUoption
    );

    PAGE.chartResizeFunc = function () {
      ChartCPU.chart.resize();
      ChartRAM.chart.resize();
    };

    MI.listener("colmchangeEnd", PAGE.chartResizeFunc);
    MI.listener("resize", PAGE.chartResizeFunc);
  });

  MI.rListener("onend", function () {
    clearInterval(PAGE.timerR);
    MI.onDestroy("colmchangeEnd", PAGE.chartResizeFunc);
    MI.onDestroy("resize", PAGE.chartResizeFunc);
    PAGE.ChartLogIs = false;
  });
</script>
